<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>IFE-Task_02</title>
        <link rel="stylesheet" href="css/style.css"/>
    </head>
    <body>
        <header id="head">
            <h1><a href="http://ife.baidu.com/"><img id="flag" src="images/baidu.png" alt="百度" width="80" height="80"/></a></h1>
            <ul class="nav">
                <li><a href="#first_box">导航链接一</a></li>
                <li><a href="#second_box">导航链接二</a></li>
                <li><a href="#images_box">导航链接三</a></li>
                <li><a href="#last_box">导航链接四</a></li>
            </ul>
        </header>

        <div id="first_box">
            <h2>文章一级标题</h2>
            <h3>文章二级标题</h3>
            <p class="author">文章作者 文章发表时间</p>
            <div class="article">
                <p>这是一段很长很长的段落,这是一段很长很长的段落,这是一段很长很长的段落,这是一段很长很长的段落,这是一段很长很长的段落,这是一段很长很长的段落,这是一段很长很长的段落,换行了</p>
                <p>这是一段很长很长的段落,这是一段很长很长的段落,这是一段很长很长的段落,这是一段很长很长的段落,这是一段很长很长的段落,这是一段很长很长的段落,换行了</p>
                <p>这是一段很长很长的段落,这是一段很长很长的段落,<a href="http://ife.baidu.com">这里有一个链接链接到http://ife.baidu.com</a>这是一段很长很长的段落,这是一段很长很长的段落,<strong>这里有个粗体字</strong>这是一段很长很长的段落,这是一段很长很长的段落,这是一段很长很长的段落,这是一段很长很长的段落,这是一段很长很长的段落,这是一段很长很长的段落,这是一段很长很长的段落。</p>
                <img src="images/3_BigPic.png" width="200" height="200" alt="图片" />
                <p>这是一段很长很长的段落,这是一段很长很长的段落,这是一段很长很长的段落,这是一段很长很长的段落,这是一段很长很长的段落,这是一段很长很长的段落,这是一段很长很长的段落,这是一段很长很长的段落,换行了</p>
                <p>这是一段很长很长的段落,这是一段很长很长的段落,这是一段很长很长的段落,<strong>这里有个粗体字</strong>这是一段很长很长的段落,这是一段很长很长的段落,<a href="http://ife.baidu.com" target="_blank">这里有一个链接点击后打开新窗口链接到http://ife.baidu.com</a>这是一段很长很长的段落,这是一段很长很长的段落,这是一段很长很长的段落,换行了</p>
            </div>
        </div>

        <div id="second_box">
            <h2>另一篇文章一级标题</h2>
            <h3>文章二级标题</h3>
            <p class="author">文章作者 文章发表时间</p>
            <div class="article">
                <p>这是一段很长很长的段落,这是一段很长很长的段落,这是一段很长很长的段落,这是一段很长很长的段落,这是一段很长很长的段落,这是一段很长很长的段落,这是一段很长很长的段落,换行了</p>
                <p>这是一段很长很长的段落,这是一段很长很长的段落,这是一段很长很长的段落,这是一段很长很长的段落,这是一段很长很长的段落,这是一段很长很长的段落,换行了</p>
                <p>这是一段很长很长的段落,这是一段很长很长的段落,<a href="http://ife.baidu.com">这里有一个链接链接到http://ife.baidu.com</a>这是一段很长很长的段落,这是一段很长很长的段落,<strong>这里有个粗体字</strong>这是一段很长很长的段落,这是一段很长很长的段落,这是一段很长很长的段落,这是一段很长很长的段落,这是一段很长很长的段落,这是一段很长很长的段落,这是一段很长很长的段落。</p>
            </div>
            <img src="images/3_BigPic.png" width="200" height="200" alt="图片" />
            <ul>
                <li>列表项目一</li>
                <li>列表项目二</li>
                <li>列表项目三</li>
            </ul>
        </div>

        <div id="images_box">
            <h2>图片</h2>
            <ul class="img_wrap" style="list-style:none">
                <li class="img_box">
                    <p>好看的图片</p>
                    <img src="images/3_BigPic.png" width="200" height="200" alt="图片" />
                </li>
                <li class="img_box">
                    <p>好看的图片</p>
                    <img src="images/3_BigPic.png" width="200" height="200" alt="图片" />
                </li>
                <li class="img_box">
                    <p>好看的图片</p>
                    <img src="images/3_BigPic.png" width="200" height="200" alt="图片" />
                </li>
                <li class="img_box">
                    <p>好看的图片</p>
                    <img src="images/3_BigPic.png" width="200" height="200" alt="图片" />
                </li>
                <li class="img_box">
                    <p>好看的图片</p>
                    <img src="images/3_BigPic.png" width="200" height="200" alt="图片" />
                </li>
                <li class="img_box">
                    <p>好看的图片</p>
                    <img src="images/3_BigPic.png" width="200" height="200" alt="图片" />
                </li>
                <li class="img_box">
                    <p>好看的图片</p>
                    <img src="images/3_BigPic.png" width="200" height="200" alt="图片" />
                </li>
                <li class="img_box">
                    <p>好看的图片</p>
                    <img src="images/3_BigPic.png" width="200" height="200" alt="图片" />
                </li>
            </ul>
        </div>

        <div id="last_box">
            <h2>最后一篇文章一级标题</h2>
            <h3>文章二级标题</h3>
            <p class="author">文章作者 文章发表时间</p>
            <ol class="rank">
                <li>排名1</li>
                <li>排名2</li>
                <li>排名3</li>
            </ol>
            <p>下面是一个表格，给表格加了一个border="1"好让你看出是表格</p>
            <form name="table" class="table">
                <table>
                    <thead>
                        <tr name="head">
                            <th class="head1">表头</th>
                            <th class="head2">表头</th>
                            <th class="head3">表头</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr name="body">
                            <td>表内容单元格</td>
                            <td>表内容单元格</td>
                            <td><a href="#">操作</a></td>
                        </tr>
                        <tr name="body">
                            <td>表内容单元格</td>
                            <td>表内容单元格</td>
                            <td><a href="#">操作</a></td>
                        </tr>
                        <tr name="body">
                            <td>表内容单元格</td>
                            <td>表内容单元格</td>
                            <td><a href="#">操作</a></td>
                        </tr>
                        <tr name="body">
                            <td>表内容单元格</td>
                            <td>表内容单元格</td>
                            <td><a href="#">操作</a></td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr name="foot">
                            <td>总计</td>
                            <td colspan="2">1000</td>
                        </tr>
                    </tfoot>    
                </table>
            </form>
        </div>

        <div id="side_box">
            <div class="side_title">
                <div class="side_stick"></div>
                <h2>这里以后是一个侧栏，这里是侧栏的标题</h2>
            </div>
            
            <!-- <h2>侧栏注册窗口标题</h2> -->
            <form action="post">
                <ul>
                    <li>
                        <label for="email">请输入邮箱地址</label>
                        <input id="email" type="text" placeholder="这里是一个文本输入框">
                    </li>
                    <li class="tips">
                        邮箱地址请按要求格式输入
                    </li>
                    <li>
                        <label for="password1">请输入密码</label>
                        <input type="password" placeholder="这里是一个文本输入框" id="password1"/>
                    </li>
                    <li>
                        <label for="password2">请重输入密码</label>
                        <input type="password" placeholder="这里是一个文本输入框" id="password2" />
                    </li>
                    <li class="tips">
                        密码请为6-16位英文数字
                    </li>
                    <li>
                        <labeL for="male">性别</labeL>
                        <input name="sex" type="radio" id="male"><labeL class="label_inner" for="male">男</labeL>
                        <input name="sex" type="radio" id="female"><labeL class="label_inner" for="female">女</labeL>
                    </li>
                    <li>
                        <label for="city">城市</label>
                        <select>   
                            <option name="city" value="1">北京</option>   
                            <option name="city" value="2">大连</option>   
                            <option name="city" value="3">长沙</option>   
                            <option name="city" value="4">珠海</option>   
                            <option name="city" value="5">广州</option>      
                        </select>
                    </li>
                    <li>
                        <label for="sport">爱好</label>
                        <input name="hobby" type="checkbox" id="sport"><labeL class="label_inner" for="sport">运动</labeL>
                        <input name="hobby" type="checkbox" id="art"><labeL class="label_inner" for="art">艺术</labeL>
                        <input name="hobby" type="checkbox" id="science"><labeL class="label_inner" for="science">科学</labeL>
                    </li>
                    <li>
                        <label id="describe" for="description">个人描述</label>
                        <textarea id="description" name="description" placeholder="这是一个多行输入框，输入您的个人描述" rows="8" cols="100"></textarea>
                    </li>
                    <li>
                        <input id="submit" type="submit" value="确认提交">
                    </li>
                </ul>
            </form>
        </div>
        <footer>版权所有&copy</footer>
    </body>
</html>